<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<%--    <style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
            width:800px;
            height:600px;
            margin: 150px auto;
            border:1px solid #ddd;
        }
        /*建议长宽比0.75，符合审美*/
    </style>--%>
    <script type="text/javascript" src="../../../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../../../plugins/echarts/echarts.min.js"></script>
</head>
<body>

<div id="frameContent" class="content-wrapper" style="margin-left:0px;">
    <section class="content-header">
    </section>
    <section class="content">
        <div class="box box-primary">
            <div id="main" style="width: 1000px;height:600px;"></div>
        </div>
    </section>
</div>
</body>

<script type="text/javascript">
    $.ajax({
        url:"/stat/getAddressData.do",
        dataType:"json",
        success:function (resultData) {
            var city =  [
                {name: '广东省', value:21},
                {name: '西藏自治区', value:1},
                {name: '福建省', value:3},
                {name: '内蒙古自治区', value:1},
                {name: '辽宁省', value:2},
                {name: '陕西省', value:4},
                {name: '江苏省', value:3},
                {name: '湖南省', value:7},
            ];

            var p1 = [];
            var p2 = [];
            for (var i = 0; i < city.length; i++) {
                p1.push(city[i].name);
                p2.push(city[i].value);
            }


            mapCharts(resultData, {
                addurl: '../../../plugins/echarts/100000.json',
                name: '全国',
                provinces:city,
                res1:p1,
                res2:p2
            });
        }
    })



    function mapCharts(resultData, data) {
        var cityProper = {
            '北京市': '../../../plugins/echarts/110000.json',
            '天津市': '../../../plugins/echarts/120000.json',
            '河北省': '../../../plugins/echarts/130000.json',
            '山西省': '../../../plugins/echarts/140000.json',
            '内蒙古自治区': '../../../plugins/echarts/150000.json',
            '辽宁省': '../../../plugins/echarts/210000.json',
            '吉林省': '../../../plugins/echarts/220000.json',
            '黑龙江省': '../../../plugins/echarts/230000.json',
            '上海市': '../../../plugins/echarts/310000.json',
            '江苏省': '../../../plugins/echarts/320000.json',
            '浙江省': '../../../plugins/echarts/330000.json',
            '安徽省': '../../../plugins/echarts/340000.json',
            '福建省': '../../../plugins/echarts/350000.json',
            '江西省': '../../../plugins/echarts/360000.json',
            '山东省': '../../../plugins/echarts/370000.json',
            '河南省': '../../../plugins/echarts/410000.json',
            '湖北省': '../../../plugins/echarts/420000.json',
            '湖南省': '../../../plugins/echarts/430000.json',
            '广东省': '../../../plugins/echarts/440000.json',
            '广西壮族自治区': '../../../plugins/echarts/450000.json',
            '海南省': '../../../plugins/echarts/460000.json',
            '重庆市': '../../../plugins/echarts/500000.json',
            '四川省': '../../../plugins/echarts/510000.json',
            '贵州省': '../../../plugins/echarts/520000.json',
            '云南省': '../../../plugins/echarts/530000.json',
            '西藏自治区': '../../../plugins/echarts/540000.json',
            '陕西省': '../../../plugins/echarts/610000.json',
            '甘肃省': '../../../plugins/echarts/620000.json',
            '青海省': '../../../plugins/echarts/630000.json',
            '宁夏回族自治区': '../../../plugins/echarts/640000.json',
            '新疆维吾尔自治区': '../../../plugins/echarts/650000.json',
            '台湾省': '../../../plugins/echarts/710000.json',
            '香港特别行政区': '../../../plugins/echarts/810000.json',
            '澳门特别行政区': '../../../plugins/echarts/820000.json'

        };
        var c1 = [];
        var c2 = [];
        $.getJSON('../../../plugins/echarts/city.json', function (cityData) {
            $.each(cityData, function (infoIndex, info) {
                for (var i = 0; i < resultData.length; i++) {
                    if (resultData[i].name in info[data.name]){
                        c1.push(resultData[i].name);
                        c2.push(resultData[i].value);
                    }
                }

            })
        })



        $.get(data.addurl, function (chinaJson) {
            echarts.registerMap(data.name, chinaJson);
            var chart = echarts.init(document.getElementById('main'));
            chart.setOption({
                tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },

                visualMap: {
                    min: 0,
                    max: 200,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],//取值范围的文字
                    inRange: {
                        color: ['#7BC0FF', '#006edd']//取值范围的颜色
                    },
                    show:true//图注
                },

                title: {
                    text: data.name + '厂家统计',
                    // subtext: '点击标题返回全国地图',
                    triggerEvent: true
                },

                grid: {
                    right: 10,
                    top: 135,
                    bottom: 100,
                    width: '20%'
                },
                xAxis: {
                    show: false
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    nameGap: 16,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        margin: 85,
                        textStyle: {
                            color: '#5B9EEA',
                            align: 'left',
                            fontSize: 14
                        },
                        rich: {
                            a: {
                                color: '#fff',
                                backgroundColor: '#FAAA39',
                                width: 20,
                                height: 20,
                                align: 'center',
                                borderRadius: 2
                            },
                            b: {
                                color: '#fff',
                                backgroundColor: '#4197FD',
                                width: 20,
                                height: 20,
                                align: 'center',
                                borderRadius: 2
                            }
                        }

                    },
                    data: data.res1

                },

                geo: {
                    right:'35%',
                    left:'5%'
                },

                series: [{
                    tooltip: {
                        trigger: 'item'
                    },
                    name: '厂家数量：',
                    type: 'map',
                    mapType: data.name,
                    left: '20%',
                    top: '20%',

                    roam: true,
                    selectedMode: 'single',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: data.provinces

                },{name: 'barSer',
                    type: 'bar',
                    roam: false,
                    visualMap: false,
                    zlevel: 2,
                    barMaxWidth: 20,
                    barGap: 0,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [{
                                    colorStops: [{
                                        offset: 0,
                                        color: '#FFD119' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#FFAC4C' // 100% 处的颜色
                                    }]
                                },
                                    {
                                        colorStops: [{
                                            offset: 0,
                                            color: '#00C0FA' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#2F95FA' // 100% 处的颜色
                                        }]
                                    }
                                ]

                            },
                            barBorderRadius: 15
                        }
                    },
                    data: data.res2}]
            });
            chart.on('click', function (params) {
                console.log(params);
                chart.clear();

                mapCharts(resultData, {
                    addurl:cityProper[params.name],
                    name:params.name,
                    provinces:resultData,
                    res1:c1,
                    res2:c2
                });
                if (params.componentType == 'title') {
                    mymap(local_var)
                }
            })
        })

    }
</script>
</html>